<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>配置页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./elementUI/index.css" />
    <link rel="stylesheet" href="../style/index.css" />
    <style>
      .el-input.is-disabled .el-input__inner {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #606266;
        cursor: not-allowed;
      }
    </style>
  </head>

  <body>
    <div id="app" class="minWidth">
      <el-form
        :model="form"
        :rules="rules"
        ref="contract"
        inline-message="true"
        style="width: 100%"
      >
        <div class="table_titel">
          <div class="titel">配置数据源</div>
        </div>
        <el-descriptions :column="1" border size="small">
          <el-descriptions-item label="选择查询方式">
            <el-form-item prop="Model_Name">
              <el-radio v-model="form.Type" label="1">表名查询</el-radio>
              <el-radio v-model="form.Type" label="/getInquirySQLAction"
                >自定义查询</el-radio
              >
            </el-form-item>
          </el-descriptions-item>
          <template v-if="form.Type==1">
            <el-descriptions-item label="菜单名称">
              <el-form-item prop="TableName">
                <el-input
                  v-model.trim="form.TableName"
                  placeholder="请输入表名"
                ></el-input>
              </el-form-item>
            </el-descriptions-item>
          </template>
          <template v-else>
            <el-descriptions-item label="请输入SQL">
              <el-form-item prop="SQLString">
                <el-input
                  @blur="handleBlur"
                  @keyup.enter="handleEnter"
                  type="textarea"
                  :autosize="{ minRows: 6, maxRows:6}"
                  placeholder="请输入SQL"
                  v-model="form.SQLString"
                ></el-input>
              </el-form-item>
            </el-descriptions-item>
          </template>
        </el-descriptions>
        <div class="table_titel">
          <div class="titel">显示字段</div>
        </div>
        <el-descriptions
          v-for="(item,index) in prop"
          :key="index"
          :column="3"
          border
          size="small"
        >
          <el-descriptions-item label="字段名称">
            <el-form-item prop="prop">
              <el-input
                disabled
                v-model.trim="item.prop"
                placeholder="字段名"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="显示名称">
            <el-form-item prop="label">
              <el-input
                v-model.trim="item.label"
                placeholder="请输入显示名称"
              ></el-input>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="是否展示">
            <el-form-item prop="isShow">
              <el-switch
                v-model="item.isShow"
                active-text="显示"
                inactive-text="隐藏"
              ></el-switch>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
        <el-form-item class="form-operation">
          <el-button @click="window.history.back()">返回</el-button>
          <el-button
            type="primary"
            :loading="loading"
            @click="submitForm('contract')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <script type="text/javascript" src="../utils/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../utils/vue.min.js"></script>
    <script type="text/javascript" src="./elementUI/index.js"></script>
    <script type="text/javascript" src="../utils/utils.js"></script>
    <script>
      Vue.component("yl-table-config", {
        template: `<div>
  <el-form :inline="true" :form="form">
    <el-form-item>
      <el-input v-model="form.ID_Name" placeholder="请输入账号名称" @keyup.enter="onSerach"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSerach">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" stripe border height="calc(100vh - 140px)" style="width: 100%">
    <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
    <el-table-column prop="User_Number" label="账号"></el-table-column>
    <el-table-column prop="Pass_Ward" label="密码"></el-table-column>
    <el-table-column prop="ID_Name" label="姓名"></el-table-column>
    <el-table-column align="center" label="权限" width="100">
      <template v-slot="{row}">
        <el-tag size="small" v-if="row.Admin_Type=='2'">系统管理员</el-tag>
        <el-tag size="small" v-else-if="row.Admin_Type=='1'">管理员</el-tag>
        <el-tag size="small" v-else-if="row.Admin_Type=='0'">普通用户</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="Enterprise_Name" label="所属企业"></el-table-column>
    <el-table-column label="操作" width="300">
    </el-table-column>
  </el-table>
  <div style="display: flex;align-items: center;justify-content: space-between;">
    <el-pagination background v-show="total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="form.page" :page-sizes="[10, 20, 30, 50]" :page-size="form.limit"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <el-button type="primary" size="mini" icon="el-icon-setting" plain>配置页面</el-button>
  </div></div>`,
        data() {
          return {
            form: {
              page: 1, //页数
              limit: 10, //每页数据条数
            },
            total: 0,
            tableData: [],
            prop: {},
            value: "",
          };
        },
        mounted() {
          this.getList(this.form);
        },
        methods: {
          onSerach() {
            //查询方法
            this.getList(this.form);
          },
          handleSizeChange(val) {
            this.form.page = 1;
            this.form.limit = val;
            this.getList(this.form);
          },
          handleCurrentChange(val) {
            this.form.page = val;
            this.getList(this.form);
          },
          getList(data) {
            const that = this;
            $.ajax({
              type: "POST",
              url: `${DomainName}/UserAllAction?token=${$.cookie("token")}`,
              data,
              success: function (Result) {
                if (Result.Status == "success") {
                  that.tableData = Result.tableData;
                  that.total = parseInt(Result.limit);
                }
              },
              complete: function (XMLHttpRequest) {
                if (
                  XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT"
                ) {
                  window.parent.document.location.href =
                    absolutepath() +
                    XMLHttpRequest.getResponseHeader("CONTENTPATH");
                }
              },
              dataType: "json",
            });
          },
          Add() {
            window.location.href = "./Add.html";
          },
        },
      });
      new Vue({
        el: "#app",
        data() {
          return {
            form: {
              Type: "/getInquirySQLAction",
              TableName: "",
              SQLString: ``,
              propData: "",
            },
            rules: {},
            radio: 0,
            value: false,
            prop: [],
            loading: false,
          };
        },
        mounted() {
          const System_Query_SerialNumber = sessionStorage.getItem(
            "System_Query_SerialNumber"
          );
          this.getData(System_Query_SerialNumber);
        },
        methods: {
          getData(Primary_Key) {
            const that = this;
            $.ajax({
              type: "POST",
              url: `${DomainName}/getInquiryIDOriginal?token=${$.cookie(
                "token"
              )}`,
              data: {
                Data: "system_query_info",
                Primary_Key_Name: "System_Query_SerialNumber",
                Primary_Key, //0:正常 1:字符串
              },
              success: function (Result) {
                if (Result.length > 0) {
                  that.form = Result[0];
                  that.prop = that.form.propData;
                }
              },
              complete: function (XMLHttpRequest) {
                if (
                  XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT"
                ) {
                  window.parent.document.location.href =
                    absolutepath() +
                    XMLHttpRequest.getResponseHeader("CONTENTPATH");
                }
              },
              dataType: "json",
            });
          },
          handleBlur() {
            //失焦
            const that = this;
            $.ajax({
              type: "POST",
              url: `${DomainName}${this.form.Type}?token=${$.cookie("token")}`,
              data: {
                Data: this.form.SQLString,
                Type: "1", //0:正常 1:字符串
              },
              success: function (Result) {
                if (Result.Status == "success") {
                  that.prop = Result.Data;
                } else {
                  that.prop = [];
                }
              },
              complete: function (XMLHttpRequest) {
                if (
                  XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT"
                ) {
                  window.parent.document.location.href =
                    absolutepath() +
                    XMLHttpRequest.getResponseHeader("CONTENTPATH");
                }
              },
              dataType: "json",
            });
          },
          submitForm(formName) {
            const that = this;
            this.$refs[formName].validate((valid) => {
              if (valid) {
                that.loading = true;
                that.form.propData = JSON.stringify(that.prop);
                const { add, modify } = that.deal();
                let data = {};
                if (add == null) {
                  data = {
                    Data: JSON.stringify({
                      Modify: { system_query_info: [modify] },
                    }),
                    Operation_Name: "修改系统",
                  };
                } else {
                  data = {
                    Data: JSON.stringify({
                      Modify: { system_query_info: [modify] },
                      Add: { system_query_info: [add] },
                    }),
                    Operation_Name: "修改数据源",
                  };
                }
                $.ajax({
                  url: DomainName + "/getEditAction?token=" + $.cookie("token"),
                  type: "POST",
                  data,
                  success: function (res) {
                    if (res.Status === "success") {
                      that.$message.success("提交成功");
                      window.history.go(-1);
                    } else {
                      that.$message.error("提交失败，请稍后再试");
                    }
                  },
                  error: function () {
                    that.$message.error("操作失败，请稍后再试");
                  },
                  complete: function (XMLHttpRequest) {
                    that.loading = false;
                    if (
                      XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT"
                    ) {
                      window.parent.document.location.href =
                        absolutepath() +
                        XMLHttpRequest.getResponseHeader("CONTENTPATH");
                    }
                  },
                });
              } else {
                return false;
              }
            });
          },
          deal() {
            const modify = deepClone(this.form);
            return { add: null, modify };
          },
        },
      });
    </script>
  </body>
</html>
